<template>
<div style="width: 90%;margin-left: 5%;margin-top: 10px">

  <el-form :model="user" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="user.username" />
    </el-form-item>
    <el-form-item label="真实姓名">
      <el-input v-model="user.realname" />
    </el-form-item>
    <el-form-item label="角色">
      <el-select v-model="user.role" placeholder="请选择用户的角色">
        <el-option label="管理员" value="管理员" />
        <el-option label="员工" value="员工" />
        <el-option label="学员" value="学员" />
      </el-select>
    </el-form-item>
    <el-form-item label="密码">
      <el-input placeholder="请输入密码" v-model="user.password" show-password></el-input>
    </el-form-item>

    <el-form-item label="性别">
      <el-radio v-model="user.sex" label="男">男</el-radio>
      <el-radio v-model="user.sex" label="女">女</el-radio>
    </el-form-item>
    <el-form-item label="生日">
      <el-date-picker v-model="user.birthday" type="date" placeholder="请选择出生日期" style="width: 100%;" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">新增用户</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</div>
</template>

<script>
import { add } from '@/api/user'
export default {
  data(){
    return{
      user:{}
    }
  },
  methods:{
    save(){
      add(this.user).then(res=>{
        if(res.code==0){
          this.$alert('亲，新增用户成功了！', '新增成功', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `action: ${ action }`
              });
              this.user={}
            }
          });
        }
      })
    }
  }
}

</script>

<style scoped>

</style>
